<template>
    <div>
      <div style="display: inline-flex; margin-top: 20px">
        <el-input
          v-model="name"
          :disabled="disabled"
          :placeholder="placeholder"
          prefix-icon="el-icon-search"
          style="width: 350px; margin-right: 10px"
          clearable
          @clear="search"
          @keydown.enter.native="search"
        ></el-input>
  
        <el-button
          :disabled="disabled"
          icon="el-icon-search"
          type="primary"
          @click="search"
        >
          搜索
        </el-button>
      </div>
  
      <!--        新增-->
  
      <el-button type="text" @click="dialogFormVisible = true"
        >新增 Dialog</el-button
      >
  
      <el-dialog title="新增" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="id" :label-width="formLabelWidth">
            <el-input v-model="form.id" autocomplete="off"></el-input>
          </el-form-item>
  
          <el-form-item label="擅长领域名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
  
        </el-form>
  
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
  
          <el-button type="primary" @click="add">确 定</el-button>
        </div>
      </el-dialog>
  
      <!--        修改-->
  
      <el-button type="text" @click="dialogFormVisible2 = true"
        >修改 Dialog</el-button
      >
  
      <el-dialog title="修改" :visible.sync="dialogFormVisible2">
        <el-form :model="form">
          <el-form-item label="id" :label-width="formLabelWidth">
            <el-input v-model="form.id" autocomplete="off"></el-input>
          </el-form-item>
  
          <el-form-item label="擅长领域名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
  
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible2 = false">取 消</el-button>
  
          <el-button type="primary" @click="update">确 定</el-button>
        </div>
      </el-dialog>
  
      <!--表单部分-->
  
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed prop="id" label="id" width="150">
        </el-table-column>
  
        <el-table-column prop="name" label="擅长领域名称" width="220">
        </el-table-column>
  
  
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="删除" placement="top">
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="deleteVisible(scope.$index)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>
    
    
    
    <script>
  export default {
    name: "Articletype",
  
    methods: {
      //模糊查询
  
      search() {
        this.axios
          .get(
            "/articletype/findlike",
  
            {
              params: {
                name: this.name,
              },
            }
          )
  
          .then((resp) => {
            console.log(resp);
  
            const r = resp.data;
  
            this.tableData = r.data;
  
            // setTimeout(()=>{this.refresh()},500)
          });
      },
  
      //上传相关的
  
      handleRemove(file) {
        console.log(file);
      },
  
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
  
        this.dialogVisible = true;
      },
  
      handleDownload(file) {
        console.log(file);
      },
  
      uploadImg(resp) {
        console.log(resp.data);
  
        this.form.image = r.data;
      },
  
      handleClick(row) {
        console.log(row);
      },
  
      add() {
        this.axios
          .post("/articletype/add", {
            id: this.form.id,
            name: this.form.name,
          })
          .then((resp) => {
            const r = resp.data;
  
            console.log(r);
  
            // this.$message.success("添加成功");
          });
  
        //关闭
  
        this.dialogFormVisible = false;
      },
  
      update() {
        this.axios
          .put("/articletype/updata", null, {
            params: {
              id: this.form.id,
              name: this.form.name,
            },
          })
          .then((resp) => {
            const r = resp.data;
  
            console.log(r);
  
            this.$message.success("修改成功");
          });
  
        //关闭
  
        this.dialogFormVisible2 = false;
      },
  
      //删除
  
      deleteVisible(index) {
        this.form.id = this.tableData[index].id;
  
        //提交请求
  
        this.axios
          .delete("/articletype/delete", {
            params: {
              id: this.form.id,
            },
          })
          .then((resp) => {
            const r = resp.data;
  
            console.log(r);
  
            this.$message.success("删除成功!");
  
            setTimeout(() => {
              this.refresh();
            }, 500);
          });
  
        // location.reload();
      },
  
      //
  
      refresh() {
        this.axios
          .get("/articletype/find")
  
          .then((resp) => {
            const r = resp.data;
  
            this.tableData = r.data;
          });
      },
    },
  
    data() {
      return {
        dialogImageUrl: "",
  
        dialogVisible: false,
  
        disabled: false,
  
        dialogFormVisible2: false,
  
        dialogFormVisible: false,
  
        form: {
          id: "",
  
          name: "",
  
        
        },
  
        name: "",
  
        // consult:{
  
        //     Startdate: new Data(),
  
        // },
  
        tableData: [
          {
            id: "",
  
            name: "",
          },
        ],
  
        formLabelWidth: "120px",
      };
    },
  
    created() {
      this.refresh();
    },
  };
  </script>
    
    
    